<template>
	<view class="shopping-logistics">
		<u-popup :show="show" mode="bottom" :overlay="true" round="30rpx" @open="open">
			<view class="box">
				<view class="" style="height: 32rpx;"></view>
				<view class="header">
					<view class="title">{{logisticsData.logisticsName}}</view>
					<view class="icon-close" @click="close">
						<u-icon name="close" size="12" color="#BDBDBD"></u-icon>
					</view>
				</view>
				<view class="" style="height: 40rpx;"></view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view>
						<view class="steps">
							<view class="steps-item" v-for="(item,index) in logisticsData.details" :key="index"
								:class="index == 0 ? 'first':''">
								<!-- 图标 -->
								<view class="icon" :class="item.state == 0?'dot':item.state==4?'end':'ing'">
									<view class="ing">
										<image class="image" src="/static/culturalCreativity/icon-logistics-1.png"
											mode="aspectFill"></image>
									</view>
									<view class="end">
										<image class="image" src="/static/culturalCreativity/icon-logistics-2.png"
											mode="aspectFill"></image>
									</view>
								</view>
								<view class="text">
									<view class="title view" v-if="item.state != 0">{{item.title}}</view>
									<view class="time view">{{item.accept_time}}</view>
									<view class="tips view">{{item.accept_station}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		listLogistics
	} from "@/culturalCreativity/http/common.js";
	export default {
		data() {
			return {
				show: false,
				logisticsData: {}
			}
		},
		methods: {
			async init(orderNumber) {
				try{
					uni.showLoading({
						title: "获取中...",
						mask: true
					});
					let res = await listLogistics(orderNumber);
					this.logisticsData = {
						...res.data.data,
						details: JSON.parse(res.data.data.details).map(item => {
							item.state = 0;
							if (item.accept_station.indexOf('揽收') != -1) {
								item.state = 1
								item.title = '已揽收'
							}
					
							if (item.accept_station.indexOf('运送') != -1) {
								item.state = 2
								item.title = '运送中'
							}
					
							if (item.accept_station.indexOf('派送') != -1) {
								item.state = 3
								item.title = '派送中'
							}
					
							if (item.accept_station.indexOf('签收') != -1) {
								item.state = 4
								item.title = '已签收'
							}
							return item
						}).reverse()
					};
					this.show = true;
					uni.hideLoading();
				}catch(e){
					console.log("物流信息出错",e)
					uni.hideLoading();
					//TODO handle the exception
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopping-logistics {
		.scroll-y {
			max-height: 800rpx;

			.steps {
				padding: 0 32rpx;
				padding-bottom: 200rpx;

				.steps-item {
					position: relative;

					&+.steps-item {
						padding-top: 32rpx;

						.icon .end,
						.icon .ing,
						.dot::after {
							top: 32rpx !important;
						}
					}

					.icon {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						width: 60rpx;

						&::before {
							content: "";
							position: absolute;
							left: 50%;
							top: 0;
							bottom: 0;
							width: 2rpx;
							background: #EEEEEE;
							z-index: 0;
						}

						.end,
						.ing {
							width: 60rpx;
							height: 60rpx;
							display: none;
							align-items: center;
							justify-content: center;
							border: 8rpx solid #FFFFFF;
							position: absolute;
							z-index: 1;
							background-color: #C1C1C1;
							border-radius: 50%;
							left: 50%;
							top: 0;
							margin-left: -38rpx;
							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}

					.icon.end .end,
					.icon.ing .ing {
						display: flex !important;
					}

					.icon.dot::after {
						content: "";
						position: absolute;
						left: 50%;
						top: 0rpx;
						border: 8rpx solid #FFFFFF;
						margin-left: -14rpx;
						width: 12rpx;
						height: 12rpx;
						background-color: #C1C1C1;
						border-radius: 50%;
						z-index: 1;
					}

					.text {
						color: #878787;
						font-size: 24rpx;
						margin-left: 84rpx;

						.title {
							font-size: 32rpx;
						}

						.view+.view {
							margin-top: 12rpx;
						}
					}
				}
				
				.steps-item:nth-last-of-type(1) .icon::before{
					height: 32rpx !important;
				}

				.steps-item.first {
					.text {
						color: #1F1F1F !important;
					}

					.icon {

						.end,
						.ing {
							background-color: #FD8F19;
						}
					}
				}
			}
		}

		.box {
			.header {
				position: relative;

				.title {
					width: 100%;
					text-align: left;
					font-size: 30rpx;
					box-sizing: border-box;
					padding-left: 32rpx;
					font-weight: 500;
					color: #1F1F1F;
				}

				.icon-close {
					position: absolute;
					right: 32rpx;
					top: 50%;
					transform: translate(0, -50%);
					background-color: #F1F1F1;
					height: 38rpx;
					width: 38rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
